<!-- 角色选择 vue -->

<template>
	<div>
		<div>
			<el-form :model="roleActionInfo">
				<el-form-item label="权限路径参考" :label-width="formLabelWidth" >
			      <el-cascader :options="dataList.selectActionList" expand-trigger="hover" v-model="selectedActionList"></el-cascader>
			    </el-form-item>

			    <el-form-item>
					<el-transfer v-model="dataList.roleActionList" :props="{key: 'id',label: 'name'}" :data="dataList.actionList"></el-transfer>
			    </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
			    <el-button @click="closeDialog">取 消</el-button>
			    <el-button type="primary" @click="dialogBtnOk">确 定</el-button>
			</div>
		</div>
		
	</div>
</template>
<script>
import _http from '../common/http.vue'

export default{
	props:['roleId'],
	data(){
		return {
			//作用不大
			selectedActionList:[],
			roleActionInfo:{},
			//作用
			form:{
			},
			dataList:{
				actionList:[],
				roleActionList:[],
				selectActionList:[]
			},
			formLabelWidth:'120px',
		}
	},
	mounted(){
		this.getSelectActionList()
		this.getActionList()
	},
	methods:{
		getActionList(){
			_http.axiosRequest(this,'actionList',{type:'list'},(res)=>{
    			this.dataList.actionList = res.data
    			this.getRoleActionList()
    		})
		},
		getSelectActionList(){
			_http.axiosRequest(this,'actionList',{type:'select'},(res)=>{
				this.dataList.selectActionList = res.data
			})
		},
		getRoleActionList(){
			_http.axiosRequest(this,'roleActionList',{id:this.roleId},(res)=>{
    			this.dataList.roleActionList = res.data
    		})
		},
		closeDialog(){
			this.$emit('closeDialog')
		},
		dialogBtnOk(){
			_http.axiosRequest(this,'addActionToRole',{roleId:this.roleId,actionList:this.dataList.roleActionList},(res)=>{
				if(_http.apiResult(this,res.data)){
					this.closeDialog()
				}
    		})
		}
	}
}	
</script>